<link href="../../vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/editor.dataTables.min.css" />

<script src="../../vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script src="../../vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="../../vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.buttons.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.select.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.editor.min.js"></script>
<script src="../../vendor/datatables/js/dataTables_CN.js"></script>

<!-- 操作管理页面 -->
<div id="page-wrapper" class="OperationManage-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">操作管理</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-search-plus fa-fw"></i> 信息查询
                </div>

                <div class="panel-body infoQuery">
                    <div class="well well-sm">
                        <table class="fontSize16">
                            <tr class="text-right">
                                <td>用户ID：</td>
                                <td>
                                    <input type="text" class="form-control" id="userIDInput" value="" placeholder="请输入用户编号" />
                                </td>
                                <td>访问URL：</td>
                                <td>
                                    <input type="text" class="form-control" id="urlInput" value="" placeholder="请输入访问URL" />
                                </td>
                            </tr>

                            <tr class="text-right">
                                <td>访问时间：</td>
                                <td colspan="3">
                                    <div class="form-horizontal" id="infoDateSelection">
                                        <table>
                                            <tr>
                                                <td colspan="2">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control OMDateInput fontSize16" value="" id="OMSearchStartDate">
                                                        <span class="input-group-addon">到</span>
                                                        <input type="text" class="form-control OMDateInput fontSize16" value="" id="OMSearchEndDate">
                                                    </div>
                                                </td>

                                                <td>
                                                    <button type="button" class="btn btn-default fontSize16" id="infoQueryBtn">查询</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-bar-chart-o fa-fw"></i> 日志列表
                </div>

                <div class="panel-body" id="logListBody">
                    <table class="display table table-striped table-bordered" cellspacing="0" width="100%" id="logListTable">
                        <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>访问URL</th>
                            <th>访问时间</th>
                        </tr>
                        </thead>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {

        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                var startDate = $('#OMSearchStartDate').val();
                var endDate = $('#OMSearchEndDate').val();
                var startDateNum = new Date(startDate.replace(/\-/g, "\/"));
                var endDateNum = new Date(endDate.replace(/\-/g, "\/")) || new Date();
                var date = new Date(data[2].replace(/\-/g, "\/")) || '2018/01/01';

                if ( ( isNaN( startDateNum ) && isNaN( endDateNum ) ) ||
                    ( isNaN( startDateNum ) && date <= endDateNum ) ||
                    ( startDateNum <= date   && isNaN( endDateNum ) ) ||
                    ( startDateNum <= date   && date <= endDateNum ) )
                {
                    return true;
                } else {
                    return false;
                }
            }
        );

        $(document).ready(function() {
            var logListTable = $('#logListTable').DataTable( {
                columnDefs: [
                    {
                        orderable: false,
                        targets: [0,1]
                    }
                ],
                order: [[ 2, "desc" ]],
                ajax: "../../server/tableData.json",
                columns: [
                    { data: null, render: function ( data, type, row ) {
                        return data.first_name+' '+data.last_name;
                    } },
                    { data: "position" },
                    { data: "start_date" }
                ]
            } );

            /* 隐藏搜索框 */
            $('.dataTables_filter').css('display', 'none');

            /* 设置日期表格 */
            $('.datetimepicker').remove();
            $('#infoDateSelection').find('.OMDateInput').datetimepicker({
                format: 'yyyy-mm-dd',
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });

            /* 可多行选择 */
            $('#logListTable tbody').on( 'click', 'tr', function () {
                $(this).toggleClass('selected');
            } );

            $('#infoQueryBtn').on( 'click', function () {
                var beginDate=$("#OMSearchStartDate").val();
                var endDate=$("#OMSearchEndDate").val();
                var d1 = new Date(beginDate.replace(/\-/g, "\/"));
                var d2 = endDate!=="" ? new Date(endDate.replace(/\-/g, "\/")) : new Date();

                if(beginDate!=="" && endDate!=="" && d1>=d2)
                {
                    alert("开始时间不能大于结束时间！");
                }else if(beginDate===""){
                    alert('开始时间不能为空！');
                }else {
                    logListTable.draw();
                }
            } );
        });

    })();
</script>
